<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="sec-title">学习记录</div>
      </el-col>
    </el-row>
    <el-form
      :inline="true"
      :model="queryParams"
      class="demo-form-inline"
    >
      <el-form-item label="视频名称">
        <el-input
          v-model="queryParams.fileName"
          placeholder="视频名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="学习状态">
        <el-select
          v-model="queryParams.studyStatus"
          placeholder="学习状态"
        >
          <el-option
          v-for="(item, index) in studyStatus"
            :label="item.codeName"
            :value="item.codeValue"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学习人">
        <el-input
          v-model="queryParams.accountName"
          placeholder="学习人"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="initSearchVideoLog"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="logs"
      height="590"
    >
      <el-table-column
        prop="logId"
        label="记录编号"
      >
      </el-table-column>
      <el-table-column
        prop="fileName"
        label="视频名称"
      >
      </el-table-column>
      <el-table-column
        prop="fileTime"
        label="视频时长"
      >
      <template slot-scope="scope">
        {{ parseVideoTime(scope.row.fileTime, 1) }}
      </template>
      </el-table-column>
      <el-table-column
        prop="readTime"
        label="学习时长"
      >
      <template slot-scope="scope">
        {{ parseVideoTime(scope.row.readTime, 2) }}
      </template>
      </el-table-column>
      <el-table-column
        prop="accountName"
        label="学习人"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="deleteHandle(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @prev-click="preHandle"
      @next-click="nextHandle"
      @current-change="currentChangeHandle"
      layout="prev, pager, next"
      :total="pageParam.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import {getConfig, queryVideoLog, deleteVideoLog} from '@/api/system/system.js'
export default {
  data() {
    return {
      logs: [],
       queryParams: {
          fileName: '',
          accountName: '',
          studyStatus: '',
          current: 1,
          pageSize: 10
        },
        studyStatus: [],
        pageParam: {
          current: 1,
          pageSize: 10,
          total: 0
        }
    };
  },
  async mounted() {
    const {data: res} = await getConfig({codeType: 'STUDY_STATUS', codeValue: ''})
    if (res.code === 200) {
      this.studyStatus = res.data.cache
    }
    this.searchVideoLog()
  },
  computed: {
    parseVideoTime() {
      return function(videoTime, type) {
        var formatTime = ""
        if (videoTime && videoTime > 0) {
          var hours = Math.round(videoTime / 1000 / 60 / 60)
          var min = Math.round(videoTime / 1000 / 60)
          var second = Math.round(videoTime / 1000)
          console.log(second)
          if (hours && hours > 1) {
            formatTime = formatTime + hours + " 小时"
            return formatTime
          }else if (min && min > 1) {
            formatTime = formatTime + min + " 分钟"
            return formatTime
          }else if (second && second > 1) {
            formatTime = formatTime + second + " 秒"
            return formatTime
          }
        }
        if (type === 1) {
          return "视频过短或是未记录时长"
        } else {
          return "观看时间过短"
        }
      }
    }
  },
  methods: {
    preHandle(current) {
      this.currentChangeHandle(current)
    },
    nextHandle(current) {
      this.currentChangeHandle(current)
    },
    currentChangeHandle(current) {
      this.pageParam.current = current
      this.searchVideoLog()
    },
    async searchVideoLog() {
        this.queryParams.current = this.pageParam.current
        this.queryParams.pageSize = this.pageParam.pageSize
        const {data: res} = await queryVideoLog(this.queryParams)
        if (res.code === 200) {
          this.logs = res.data.logs.records
          this.pageParam.total = res.data.logs.total
        } else {
          this.logs = []
          this.$message.error(res.message)
        }
      },
      initSearchVideoLog() {
        this.pageParam.current = 1
        this.pageParam.pageSize = 10
        this.searchVideoLog()
      },
      async deleteHandle(row) {
        await deleteVideoLog(row.logId)
        this.$message.success("删除成功")
        this.searchVideoLog()
      }
  },
};
</script>
<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>